import React, { Component } from 'react'
import Banner from './Banner';
import { withRouter, Link } from 'react-router-dom';

import Axios from 'axios';

class Content extends Component {
    state = {
        list: [],//所有店铺数据列表
        oIndex: 0,//导航初始下标
    };

    componentDidMount() {
        Axios.get('/list').then(res => {
            this.setState({
                list: res.data.list
            })
        })
    }

    /* 排序距离最近 */
    glzj = (index) => {
        let list = this.state.list.sort((a, b) => {
            return a.km - b.km
        })
        this.setState({
            list: list,
            oIndex: index
        })
    }

    /* 排序销量最高 */
    xlzg = (index) => {
        let list = this.state.list.sort((a, b) => {
            return b.yxl - a.yxl
        })
        this.setState({
            list: list,
            oIndex: index
        })
    }

    /* 排序综合排序  */
    zhpx = (index) => {
        Axios.get('/list').then(res => {
            this.setState({
                list: res.data.list,
                oIndex: index
            })
        })
    }
    render() {
        return (
            <div className="content">
                {/* 轮播图 */}
                <Banner></Banner>
                {/* 搜索框 */}
                <div className="search">
                    <input type="text" placeholder="输入商家、商品名称" onClick={() => {
                        this.props.history.push({ pathname: '/search' });
                    }} />
                </div>
                <h3 className="cnxh">猜你喜欢</h3>
                {/* 排序导航 */}
                <div className="nav">
                    <span onClick={() => { this.zhpx(0) }} className={this.state.oIndex === 0 ? 'ac' : ''}>综合排序</span>
                    <span onClick={() => { this.glzj(1) }} className={this.state.oIndex === 1 ? 'ac' : ''}>距离最近</span>
                    <span onClick={() => { this.xlzg(2) }} className={this.state.oIndex === 2 ? 'ac' : ''}>销量最高</span>
                    <span>筛选</span>
                </div>
                <div className="bqnav">
                    <span>年货节热卖</span>
                    <span>津贴联盟</span>
                    <span>满减优惠</span>
                    <span>品质联盟</span>
                </div>
                {/* 数据列表 */}
                <div className="list">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <Link className="item" key={index} to={{ pathname: '/shop', state: item }}>
                                    <div className="img">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="text">
                                        <div className="title">
                                            {item.title}
                                        </div>
                                        <div className="yxl">
                                            <span>月销量：{item.yxl}</span><span>{item.km}km</span>
                                        </div>
                                        <div className="mj">
                                            <span>满{item.xm}减{item.mj1}</span><span>满{item.dm}减{item.mj2}</span><span>满{item.gm}减{item.mj3}</span>
                                        </div>
                                    </div>
                                </Link>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}

export default withRouter(Content)
